import React, { ReactElement, useContext } from 'react';
import { View, Text } from 'react-native';
import moment from 'moment';

import styles from './style';
import Button from '../../../../components/Button';
import { Store } from '../../reducer';
import { onPressLesson } from '../../actions';
import { LessonStatus } from '../../../ClassRoom/constant';
import { LessonInfo } from '../../../../api/class/getLessons';

export default (item: LessonInfo): ReactElement => {
  const { name, status, lessonStartTime } = item;
  const { state } = useContext(Store);
  const { lesson } = state;
  const { courseName } = lesson;
  return (
    <View style={styles.item}>
      <Text style={styles.courseName}>{name}</Text>
      <View style={styles.info}>
        <View style={styles.left}>
          <View style={styles.icon} />
          <View style={styles.timeContent}>
            <Text style={styles.time}>核心课</Text>
            <Text style={styles.time}>
              {lessonStartTime !== ''
                ? moment(lessonStartTime).format('HH:mm')
                : '敬请期待'}
            </Text>
          </View>
        </View>
        <Button
          textStyle={[
            styles.actionDesc,
            status === LessonStatus.UnStart ? styles.unStartActionDesc : {},
            status === LessonStatus.HaveStart ||
            status === LessonStatus.EarlyEntry
              ? styles.startActionDesc
              : {}
          ]}
          style={[
            styles.action,
            status === LessonStatus.UnStart ? styles.unStartAction : {},
            status === LessonStatus.HaveStart ||
            status === LessonStatus.EarlyEntry
              ? styles.startAction
              : {}
          ]}
          text={status === LessonStatus.End ? '观看回放' : '进入教室'}
          onPress={(): void => {
            onPressLesson({
              ...item,
              source: courseName,
              startTime: ''
            });
          }}
        />
      </View>
    </View>
  );
};
